<template>
    <div class="ldBox">
        <el-tabs v-model="state.activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-form ref="formRef" label-position="top">
                <el-tab-pane :label="item.name" :name="item.code" v-for="item in tabList">
                    <div v-if="state.activeName ==1">
                        <el-row :gutter="22">
                            <el-col :span="24">
                                <el-button type="primary">新增系统</el-button>
                                <el-button type="primary">高级设置</el-button>
                            </el-col>
                            <el-col :span="12" v-for="item in 4">
                                <div class="oneCard">
                                    <el-form-item label="选择系统" prop="deviceName">
                                        <el-select clearable filterable v-model="state.formData.deviceName"
                                            placeholder="请选择">
                                            <el-option>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-tabs v-model="state.activeNameSub" type="card" class="demo-tabs">
                                        <el-tab-pane label="开启" name="1">
                                            <el-form-item label="请求URL" prop="deviceName">
                                                <el-select clearable filterable v-model="state.formData.deviceName"
                                                    placeholder="请选择">
                                                    <el-option>
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-tab-pane>
                                    </el-tabs>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div v-if="state.activeName ==2">
                        <vxe-table height="200" :data="state.yinziList" border="inner">
                            <vxe-column field="code" title="设备名称"></vxe-column>
                            <vxe-column field="name" title="发送值"></vxe-column>
                            <vxe-column title="操作" :min-width="80">
                                <template #default="{ row }">
                                    <el-button type="text" @click="selectHBClick(row)">选择</el-button>
                                </template>
                            </vxe-column>
                        </vxe-table>
                        <vxe-table height="200" :data="state.yinziList" border="inner">
                            <vxe-column field="code" title="IP地址"></vxe-column>
                            <vxe-column field="name" title="发送值"></vxe-column>
                            <vxe-column title="操作" :min-width="80">
                                <template #default="{ row }">
                                    <el-button type="text" @click="selectHBClick(row)">移除</el-button>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                    <div v-if="state.activeName ==3">
                        <el-row :gutter="22">
                            <el-col :span="24">
                                <el-button type="primary">使用模板</el-button>
                                <el-button type="success">新建模板</el-button>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="APP" prop="deviceName" label-position="top">
                                    <el-input disabled v-model="state.formData.place" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="站内信" prop="deviceName">
                                    <el-input disabled v-model="state.formData.place" placeholder="请输入"></el-input>
                                </el-form-item>
                                <el-form-item label="短消息" prop="deviceName">
                                    <el-input disabled v-model="state.formData.place" placeholder="请输入"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-for="item in 4">
                                <el-form-item label="推送人员信息" prop="deviceName" >
                                    <vxe-table height="200" :data="state.yinziList" border="inner" class="w100">
                                        <vxe-column field="code" title="用户"></vxe-column>
                                        <vxe-column title="操作" :min-width="80">
                                            <template #default="{ row }">
                                                <el-button type="text" @click="selectHBClick(row)">选择</el-button>
                                            </template>
                                        </vxe-column>
                                    </vxe-table>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div v-if="state.activeName ==4">
                        <vxe-table height="200" :data="state.yinziList" border="inner">
                            <vxe-column field="code" title="IP地点"></vxe-column>
                            <vxe-column field="code" title="安装地点"></vxe-column>
                            <vxe-column field="name" title="发送值"></vxe-column>
                            <vxe-column title="操作" :min-width="80">
                                <template #default="{ row }">
                                    <el-button type="text" @click="selectHBClick(row)">选择</el-button>
                                </template>
                            </vxe-column>
                        </vxe-table>
                        <vxe-table height="200" :data="state.yinziList" border="inner">
                            <vxe-column field="code" title="IP地址"></vxe-column>
                            <vxe-column field="code" title="安装地点"></vxe-column>
                            <vxe-column field="name" title="发送值"></vxe-column>
                            <vxe-column title="操作" :min-width="80">
                                <template #default="{ row }">
                                    <el-button type="text" @click="selectHBClick(row)">移除</el-button>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                    <div v-if="state.activeName ==5">
                        <el-form-item label="请求意见内容" prop="deviceName">
                            <el-input :rows="3" v-model="state.formData.remark" type="textarea" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                    </div>
                </el-tab-pane>
            </el-form>
        </el-tabs>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        tabList: {
            default: () => [{
                name: '系统控制',
                code: 1,
            }, {
                name: '地面语音报警',
                code: 2,
            }, {
                name: '消息推送',
                code: 3,
            }, {
                name: '调度大屏',
                code: 4,
            }, {
                name: '意见建议',
                code: 5,
            }],
            type: Array,
        }

    })
    // 重点
    const state = reactive({
        activeName: 1,
        formData: {},
        activeNameSub: 1
    })

    function handleClick(val) {

    }
</script>
<style lang="scss" scoped>
    .ldBox {
        margin: 10px;
    }

    .oneCard {
        margin-top: 20px;
        border-radius: 2px;
        background: rgba(249, 249, 250, 1);
        padding: 10px;
    }
</style>